<template>
  <div class="charts_shadow" :style="{width:`${innerWidth *.313}px`}">
    <div class="until_title_charts">Wi-Fi安全教育</div>
    <div class="monitor_info" style="width: 100%;height: 80%">
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{Math.round(wifiInfo.wifiPersonCount)}}
        </div>
        <div class="monitor_item_des">Wi-Fi教育人次</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="wifiInfo.wifiPersonRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(wifiInfo.wifiPersonRate * 100).toFixed(0)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="wifiInfo.wifiPersonRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-wifiInfo.wifiPersonRate * 100).toFixed(0)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{Math.round(wifiInfo.theAvg)}}
        </div>
        <div class="monitor_item_des">日均答题人次</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up safe" v-if="wifiInfo.theAvgRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(wifiInfo.theAvgRate * 100).toFixed(0)}}%</span>
          </div>
          <div class="item_rate_down warning" v-if="wifiInfo.theAvgRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-wifiInfo.theAvgRate * 100).toFixed(0)}}%</span>
          </div>
        </div>
      </div>
      <div class="monitor_item relative">
        <div class="monitor_item_num">
          {{(wifiInfo.theTrueRate * 100).toFixed(0)}}%
        </div>
        <div class="monitor_item_des">平均答题正确率</div>
        <div class="monitor_item_rate">
          <div class="item_rate_up warning" v-if="wifiInfo.beforeTrueRate > 0">
            <i class="iconfont icon-jianyoushang"></i>
            <span class="rate_up_num">{{(wifiInfo.beforeTrueRate * 100).toFixed(0)}}%</span>
          </div>
          <div class="item_rate_down safe" v-if="wifiInfo.beforeTrueRate < 0">
            <i class="iconfont icon-jianyouxia"></i>
            <span class="rate_up_num">{{(-wifiInfo.beforeTrueRate * 100).toFixed(0)}}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'WiFi_education',
    mixins: [mixin],
    data () {
      return {
        wifiInfo: {
          beforeTrueRate: 0,
          theAvg: 0,
          theAvgRate: 0,
          theTrueRate: 0,
          wifiPersonCount: 0,
          wifiPersonRate: 0
        }
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid) {
          this.getWifiStatisticalInfo()
        }
      }
    },
    mounted () {
      this.getWifiStatisticalInfo()
    },
    methods: {
      getWifiStatisticalInfo () {
        let data = {
          coId: this.currentUser.coId,
          pjId: this.currentUser.pjId,
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getWifiStatisticalInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) {
            this.wifiInfo.beforeTrueRate = 0
            this.wifiInfo.theAvg = 0
            this.wifiInfo.theAvgRate = 0
            this.wifiInfo.theTrueRate = 0
            this.wifiInfo.wifiPersonCount = 0
            this.wifiInfo.wifiPersonRate = 0
            return
          }
          let data = res.data.data
          this.wifiInfo.beforeTrueRate = data.beforeTrueRate
          this.wifiInfo.theAvg = data.theAvg
          this.wifiInfo.theAvgRate = data.theAvgRate
          this.wifiInfo.theTrueRate = data.theTrueRate
          this.wifiInfo.wifiPersonCount = data.wifiPersonCount
          this.wifiInfo.wifiPersonRate = data.wifiPersonRate
        })
      }
    }
  }
</script>

